<template>
  <div id="app">
    <div>
        <p @click="check(index)" :class="{active:count==index}" v-for="(item,index) in arr" :key="index">{{item}}</p>
    </div>
    <div class="good" v-for="(item,index) in goods[count].arr" :key="index">
        <div class="left">
            <img :src="item.pic" alt="">
        </div>
        <div class="right">
            <p>{{item.title}}</p>
            <p>{{item.name}}</p>
            <p>月售{{item.num}} 好评率{{item.haopin}}%</p>
            <span>￥{{item.price}}</span>
            <span>+</span>
        </div>
    </div>
  </div>
</template>

<script>
import pic from "../assets/good1.jpg"
import pic1 from "../assets/good2.jpg"
import pic2 from "../assets/good3.jpg"


export default {
data(){
    return {
        count:0,
        arr:["热销","优惠","三文鱼","刺身","年货礼品区","野生大对虾","冻货区"],
        goods:[
        {
        tagName:"三文鱼",
        arr:[
            {pic,
            title:"挪威三文鱼刺身",
            name:"取三文鱼中段，口感鲜嫩，富含维生素",
            num:40,
            haopin:100,
            price:45
            },
            {pic,
            title:"挪威三文鱼刺身",
            name:"取三文鱼中段，口感鲜嫩，富含维生素",
            num:40,
            haopin:100,
            price:45
            },
            {pic,
            title:"挪威三文鱼刺身",
            name:"取三文鱼中段，口感鲜嫩，富含维生素",
            num:40,
            haopin:100,
            price:45
            }
            ]
        },
        {
        tagName:"刺身",
        arr:[
            {pic:pic1,
            title:"国产生蚝-刺身",
            name:"每份一只晃动湛江生蚝 个大肉多",
            num:95,
            haopin:100,
            price:8
            },
            {pic:pic1,
            title:"国产生蚝-刺身",
            name:"每份一只晃动湛江生蚝 个大肉多",
            num:95,
            haopin:100,
            price:8
            },
            {pic:pic1,
            title:"国产生蚝-刺身",
            name:"每份一只晃动湛江生蚝 个大肉多",
            num:95,
            haopin:100,
            price:8
            }
            ]
        },
        {
        tagName:"虾",
        arr:[
            {pic:pic2,
            title:"北极甜虾",
            name:"百分之百当天空运送达",
            num:34,
            haopin:100,
            price:54.4
            },
            {pic:pic2,
            title:"北极甜虾",
            name:"百分之百当天空运送达",
            num:34,
            haopin:100,
            price:54.4
            },
            {pic:pic2,
            title:"北极甜虾",
            name:"百分之百当天空运送达",
            num:34,
            haopin:100,
            price:54.4
            }
            ]
        }
        ]
    }
},
methods:{
    check(index){
        this.count=index
    }
}
}
</script>

<style lang="scss" scoped>
#app div:nth-child(1){
width: 20%;
height: 100%;
float: left;
}
#app div:nth-child(1)>p{
    width: 52px;
   padding: 6px 16px;
   margin-bottom: 22px;
   font-size: 13px;

}
.active {
    font-weight: bold;
    border-left: 2px solid red;
}
#app {
    overflow: hidden;
}
#app .good  {
    display: flex;
    justify-content: space-between;
    height: auto;
    margin-bottom: 16px;
    padding-right: 8px;
    box-sizing: border-box;
}
.left img {
    width: 92px;
    height: 106px;
}
.right {
    margin-left: 6px;
    box-sizing: border-box;
}
.right p:nth-child(1) {
    font-size: 18px;
    font-weight: bold;
}
.right p:nth-child(2){
    font-size: 13px;
    color: #999;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 3px 0;
}
.right p:nth-child(3){
    font-size: 13px;
    color: #999;
}
.right span:nth-child(4){
    color: red;
    font-size: 18px;
    display: inline-block;
    margin-top: 20px;
    font-weight: bold;
}
.right span:nth-child(5){
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(7 160 236);
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 20px;
    margin-left: 120px;
    margin-bottom: 4px;
}
</style>